<template>
  <div class="business">
    <div class="headerBackground" v-if="storeInfo">
      <div class="title">
        <span class="iconfont icon-left gobackIcon" @click="()=>{this.$router.go(-1)}"></span>
        <p>商家管理</p>
      </div>
      <div class="businessInfoCard">
        <div class="container">
          <div class="leftImage">
            <img :src="storeInfo.storeLogo" alt />
          </div>
          <div class="centerInfo">
            <p>{{storeInfo.storeName}}</p>
            <p>{{storeInfo.mobile}}</p>
          </div>
          <div class="rightIcon" @click="()=>{this.$router.push('/businessSetting')}">
            <img src="https://gve.oss-cn-beijing.aliyuncs.com/2020/02/04/1580829175092.png" alt />
          </div>
        </div>
        <div class="headerBottomText">
          <p>商家简介:{{storeInfo.description}}</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="listCard">
        <p class="titleChip">
          <span class="leftIcon"></span>
          <span class="text">功能应用</span>
        </p>
        <div>
          <van-grid>
            <van-grid-item text="订单管理" to="/orderManage">
              <img
                slot="icon"
                style="width:50px;"
                src="https://gve.oss-cn-beijing.aliyuncs.com/2020/02/04/1580826156047.png"
                alt
              />
            </van-grid-item>
            <van-grid-item text="商品管理" to="/commodity">
              <img
                slot="icon"
                style="width:50px;"
                src="https://gve.oss-cn-beijing.aliyuncs.com/2020/02/04/1580826544507.png"
                alt
              />
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    storeInfo: null
  }),
  created() {
    this.$axios.get(`ym/mall-online-merchant/info`).then(res => {
      if (res.code === 0) {
        this.storeInfo = res.data;
        this.$store.commit("SAVEBUSINESSINFO", res.data);
      }
      console.log(res);
    });
  }
};
</script>
<style lang="scss" scoped>
.business {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #edfcff;
  .headerBackground {
    background: url("https://gve.oss-cn-beijing.aliyuncs.com/2020/02/04/1580804814685.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    .title {
      margin: 0;
      padding: 10px 0;
      color: #fff;
      .gobackIcon {
        border: 1px solid #0cbccb;
        position: absolute;
        left: 10px;
      }
      p {
        margin: 0;
        padding: 0;
        text-align: center;
      }
    }
    .businessInfoCard {
      height: 180px;
      width: 90%;
      background: #fff;
      position: absolute;
      bottom: -40px;
      border-radius: 10px;
      .container {
        display: flex;
        height: 100px;
        padding: 16px;
        padding-bottom: 0;
        .leftImage {
          width: 250px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 80%;
            height: 80%;
          }
        }
        .centerInfo {
          width: 100%;
          color: #0cbccb;
          font-size: 14px;
          padding: 16px 0;
          display: inline-block;
          p {
            margin: 5px 0;
            padding: 0;
          }
        }
        .rightIcon {
          width: 100%;
          padding: 16px 0;
          position: relative;
          img {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 0;
            top: 0;
          }
        }
      }
      .headerBottomText {
        font-size: 12px;
        padding: 0 20px;
        color: #0cbccb;
      }
    }
  }
  .content {
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    .listCard {
      background: #fff;
      width: 90%;
      height: 200px;
      .titleChip {
        margin: 0;
        padding: 10px 0;
        font-size: 14px;
        height: 20px;
        color: #0cbccb;
        position: relative;
        display: flex;
        .leftIcon {
          display: inline-block;
          width: 6px;
          height: 100%;
          background: #0cbccb;
        }
        .text {
          padding: 0 10px;
        }
      }
    }
  }
}
</style>